<!--  -->
<template>
  <div class='authority'>
    <!-- 查询 -->
    <el-form :inline="true" :model="FindFromForEarTag" class="demo-form-inline">
      <el-form-item label="组合名称">
        <el-input v-model="FindFromForEarTag.kw" placeholder="请输入关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitSrearch">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <!-- 列表展示 -->
      <el-table
        :data="getGaleWayList"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="55">
        </el-table-column>
        <el-table-column
          prop="componentName"
          label="组合名称"
          width="80">
        </el-table-column>
        <el-table-column
          prop="componentNum"
          label="组合编号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="80">
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="160">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          >
          <template slot-scope="scope">
            <el-button v-permissions="'deviceComponent:detail'" @click="getLiveStockDetail(scope.row.id)" type="text" size="small">详情</el-button>
            <el-button v-permissions="'deviceComponent:delete'" @click="deletLiveStockDUser(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog
        title="详情"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :show-close="false"
        :close-on-press-escape="false"
        width="50%">
        <el-button type="primary" @click="allotRule" v-if="showRuleButton && !haveRule">新增规则设置</el-button>
        <el-button type="primary" @click="viewRuleDetail" v-if="showRuleButton && haveRule">查看规则详情</el-button>
        <updateGroup :key="updateTime" :isDisbale="seTisDisbale" @closePopup="closePage" />
        <div class="buttons">
           <el-button v-permissions="'deviceComponent:update'" type="primary" @click="setConfigUserRole" v-if="isDisabled">修改</el-button>
           <el-button @click="closeDiaDetail">关闭</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="规则设置"
        :visible.sync="ruleDialog"
        :close-on-click-modal="false"
        :show-close="false"
        :close-on-press-escape="false"
        width="80%">
        <ruleAddPage
          :key="updateTime"
          :deciveArr="deciveArrProps"
          @closePopup="ruleDialog = false"
          :ruleId="ruleId"/>
      </el-dialog>

      <el-dialog
        title="规则详情"
        :visible.sync="ruleDetailDialog"
        :close-on-click-modal="false"
        :show-close="false"
        :close-on-press-escape="false"
        width="80%">
        <ruleDetailPage
          :key="updateTime"
          :detailData="detailData"
          :deciveArr="deciveArrProps"
          @closePopup="ruleDetailDialog = false"
          @deleteSuccess="dialogVisible = false"
          :ruleId="ruleId"
          :ruleCompentID="myRuleCompentID"
          :isShowPupop="ruleDetailDialog"/>
      </el-dialog>
    </div>
    <pagination
      class="pagination_container"
      :total="pagination.total"
      :page-sizes="[10, 20, 50, 100]"
      :page.sync="pagination.page"
      :limit.sync="pagination.pageSize"
      @pagination="getEarTagListing"
    />
  </div>
</template>

<script>
import { deviceComponentList, deviceComponentDetail } from '@/api/deviceComponent'
import { componentRuleDetail } from '@/api/componentRule'
import Pagination from '@/components/pagination'
import updateGroup from '@/components/updateGroup'
import ruleAddPage from '@/components/ruleAddPage'
import ruleDetailPage from '@/components/ruleDetailPage'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    Pagination,
    updateGroup,
    ruleAddPage,
    ruleDetailPage
  },
  data () {
    // 这里存放数据
    return {
      myRuleCompentID: 0,
      detailData: [],
      ruleDetailDialog: false,
      ruleId: 0,
      deciveArrProps: [],
      ruleDialog: false,
      showRuleButton: true,
      seTisDisbale: true,
      geSonPageObj: {},
      updateTime: new Date().getTime(),
      isDisabled: true,
      getGaleWayList: [], // 牧场列表
      // 分页
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      // 查询
      FindFromForEarTag: {
        kw: '',
        gatewayIdArr: [],
        gatewayId: ''
      },
      // checked: false,
      dialogVisible: false,
      userRemarkGet: '',
      userList: JSON.parse(sessionStorage.getItem('routerList')),
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultCheckRole: [],
      setRoleIdArrFir: [],
      setRoleIdArrSen: [],
      haveRule: false,
      recodeNum: 0
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getEarTagListing()
  },
  // 方法集合
  methods: {
    viewRuleDetail () {
      this.ruleDetailDialog = true
      componentRuleDetail(this.ruleId).then(res => {
        if (res.code === '200') {
          const result = JSON.parse(res.data.ruleInfo)
          for (const el of result.tahRuleList) {
            for (const son of el.switchRuleList) {
              if (son.value === 1) {
                son.value = true
              } else {
                son.value = false
              }
            }
          }
          this.detailData = result.tahRuleList
          this.myRuleCompentID = res.data.id
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 分配规则
    allotRule () {
      this.updateTime = new Date().getTime()
      this.ruleDialog = true
      this.dialogVisible = false
    },
    saveRule () {},
    closePage () {
      this.dialogVisible = false
      this.seTisDisbale = true
    },

    getEarTagListing () {
      deviceComponentList({
        kw: this.FindFromForEarTag.kw,
        limit: this.pagination.pageSize,
        page: this.pagination.page
      }).then(res => {
        if (res.code === '200') {
          this.getGaleWayList = res.data.records
          if (res.data.total > 0 && Math.ceil(res.data.total / this.pagination.size) < this.pagination.page) {
            this.pagination.page = Math.ceil(res.data.total / this.pagination.size)
            this.getEarTagListing()
          } else {
            this.pagination.total = res.data.total
          }
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 查询
    submitSrearch () {
      this.getEarTagListing()
    },
    // 重置
    resetForm () {
      this.FindFromForEarTag.kw = ''
      this.FindFromForEarTag.gatewayId = ''
    },
    // 删除用户
    deletLiveStockDUser (val) {
      // this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning',
      //     center: true
      //   }).then(() => {
      //     companyDelete(val).then(res => {
      //       if (res.code === '200') {
      //         this.$message({
      //           message: '删除成功',
      //           type: 'success'
      //         })
      //         this.getEarTagListing()
      //       } else {
      //         this.$message({
      //           type: 'info',
      //           message: res,message
      //         });
      //       }
      //     })
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消删除'
      //     });
      //   });

    },
    // 组合详情
    getLiveStockDetail (val) {
      this.recodeNum = 0
      this.ruleId = val
      deviceComponentDetail(val).then(res => {
        for (const el of res.data.deviceList) {
          el.ischecked = false
        }
        sessionStorage.setItem('toUpdetaData', JSON.stringify(res.data))
        this.updateTime = new Date().getTime()
        const testArr = res.data.deviceList
        this.deciveArrProps = res.data.deviceList
        componentRuleDetail(val).then(res => {
          if (res.data != null) {
            this.haveRule = true
          } else {
            this.haveRule = false
          }
        })
        for (const inEl of testArr) {
          if (inEl.deviceType === 0) {
            this.recodeNum++
          }
        }
        if (this.recodeNum === testArr.length) {
          this.showRuleButton = false
        }
        this.dialogVisible = true
      })
    },
    // 修改用户详情
    setConfigUserRole () {
      this.$confirm('是否确认修改耳标信息', '提示', {
        confirmButtonText: '确定',
        showCancelButton: '取消',
        distinguishCancelAndClose: false
      }).then(() => {
        this.seTisDisbale = false
        this.isDisabled = false
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消!'
        })
      })
    },
    // 关闭详情弹框
    closeDiaDetail () {
      this.dialogVisible = false
      this.isDisabled = true
      this.seTisDisbale = true
      this.showRuleButton = true
      this.haveRule = false
      this.recodeNum = 1
    }
  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
.authority {
  width: 100%;
  height: 100%;
}
.fir {
  width: auto;
  height: 30px;
  line-height: 30px;
  span {
    margin-left: 10px;
    padding: 5px;
    width: 30%;
  }
}
.sen {
  margin: 5px auto;
  width: 80%;
  padding: 10px;
  border: 1px solid #f0f0f0;
}
.buttons {
  width: 100%;
  text-align: center;
}
</style>
